<template>
  <div>
    <a-select
        class="ant-select"
        v-model:value="currentValue"
        :size="size"
    >
        <a-select-option v-for="item in options" :key="item.id" :value="item.id">
          <div class="select-option-content">
            <a-image style="width: 20px; height: 20px;" :src="item.country_flag" />
            <span>{{ item.name }}</span>
          </div>
        </a-select-option>
    </a-select>
   
    <!-- <div class = "country" >
        Can't find the country you're looking for?
    </div> -->
    <!-- <div class = "country country_color">View All Countries</div> -->
    <a-button type="primary" block @click="saveCurrent()">Shop now</a-button>
  </div>
</template>

<script lang="ts" setup>
import { ref ,computed,onMounted} from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import { Local } from "@/utils/storage.ts";
import { useCurrencyStore } from '@/store'
const emit = defineEmits(['closeDrawer'])
const currencyStore = useCurrencyStore()
let options = computed(() => {
  return currencyStore.currencies;
})
const currentValue = ref(currencyStore.currentCurrency?.id ?? 'USD');
const saveCurrent = () => {
  let obj = options.value.find(item => item.id === currentValue.value)
  if (obj) {
    currencyStore.setCurrency(obj)
    //关闭drawer
    emit('closeDrawer',false)
    // visible.value = false;
    // router.go(0)
  }
}
onMounted(() => {
  // 货币货币列表
  if(Local.get('currencies')){
    setInterval(async () => {
      Local.remove('currencies')
      // 初始化加载货币数据
      currencyStore.fetchCurrencies()
    }, 300000)
  }else{
    currencyStore.fetchCurrencies()
  }
  
});
</script>

<style  scoped>
.ant-select {
    width: 100%;
    border-radius: 20px;
    margin-bottom:20px ;
    
}
.country{
        display: flex;
        justify-content: center;
    }
.country_color{
    color: rgb(0, 122, 122);
    /* 下划线 */
    text-decoration: underline;
    margin:5px 0  10px;
}
:deep(.css-dev-only-do-not-override-1p3hq3p.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
    position: relative;
    background-color: #ffffff;
    border-radius: 20px;
    height: 35px;
    display: flex;
    align-items: center;
    border: 1px solid #d9d9d9;
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/* 此选择器用于选中被选中且未禁用的下拉选项 */
:deep(.css-dev-only-do-not-override-1p3hq3p).ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    /* 设置选项文字颜色 */
    color: rgba(0, 0, 0, 0.88);
    /* 设置选项文字粗细 */
    font-weight: 600;
    /* 设置选项背景颜色 */
    background-color: #000000;
}
:deep(.css-dev-only-do-not-override-1p3hq3p).ant-btn-primary {
    color: #fff;
    background-color: rgb(0, 122, 122);
    border-radius: 20px;
    height: 35px;
    box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
    padding: 0.46875rem 1rem !important;
}
.select-option-content {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 35px;
  padding: 0 4px;
}

:deep(.ant-select-selector) {
  height: 35px !important;
}

:deep(.ant-select-selection-item) {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  height: 35px !important;
  line-height: 35px !important;
}

:deep(.ant-select-item) {
  padding: 0 8px !important;
}

:deep(.ant-select-item-option-content) {
  padding: 0 !important;
}

:deep(.ant-image) {
  display: flex !important;
  align-items: center !important;
}

:deep(.ant-select-item-option-content span) {
  line-height: 35px;
}
</style>